<template>
  <div class="container">
    <a-form :model="formData" ref="formRef" auto-label-width size="large">
      <a-spin :loading="loading">
        <a-form-item label="站点名称" field="siteTitle">
          <a-input
            class="input-width"
            v-model="formData.siteTitle"
            placeholder="请输入站点名称"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="站点logo" field="logo">
          <UploadImage v-model="formData.logo" :limit="1"></UploadImage>
        </a-form-item>

        <a-form-item label="是否启用内容安全审查" field="contentSecurity">
          <a-switch
            type="round"
            v-model="formData.contentSecurity"
            :checked-value="1"
            :unchecked-value="0"
          >
            <template #checked>{{ $t('searchTable.operation.enabled') }}</template>
            <template #unchecked>{{ $t('searchTable.operation.disabled') }}</template>
          </a-switch>
        </a-form-item>
        <a-form-item label="域名" field="domain">
          <a-input class="input-width" v-model="formData.domain" placeholder="请输入站点域名" allow-clear />
        </a-form-item>
        <a-form-item label="站点关键词" field="keywords">
          <a-input-tag
            class="input-width"
            v-model="formData.keywords"
            placeholder="请输入站点关键词"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="站点版权" field="copyright">
          <a-input
            class="input-large-width"
            v-model="formData.copyright"
            placeholder="请输入站点版权"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="站点描述" field="descrip">
          <a-textarea
            class="input-large-width"
            v-model="formData.descrip"
            placeholder="请输入站点描述"
            allow-clear
          />
        </a-form-item>
      </a-spin>
    </a-form>
    <a-button
      type="primary"
      style="margin-top: 20px;margin-left: 152px"
      @click="handleSubmit"
      :loading="loading"
    >{{ $t('searchTable.columns.operations.save') }}</a-button>
  </div>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';
import {
  getAppConfig,
  saveAppConfig,
  AppConfigData,
} from '@/api/app/appConfig';

import UploadImage from '@/components/upload-image/index.vue';

const { t } = useI18n();

const loading = ref(false);

const formRef = ref();
const formData = ref<BaseInfo>({});
const body = ref<AppConfigData>({
  name: 'wxInfo',
});

// 基础信息
export interface BaseInfo {
  siteTitle?: string;
  logo?: string;
  contentSecurity?: number;
  domain?: string;
  keywords: string[];
  copyright?: string;
  descrip: string;
}

// 初始化字典信息
const app = getCurrentInstance();
// 校验是否有新增权限
const created = app?.proxy?.hasPermission('sys:app:config:save');

// 确认
const handleSubmit = async () => {
  formRef.value.validate().then((result: any) => {
    // 校验不通过
    if (result) {
      return;
    }
    loading.value = true;
    body.value.data = JSON.stringify(formData.value);
    saveAppConfig(body.value)
      .then(() => {
        onOk();
      })
      .finally(() => {
        loading.value = false;
      });
  });
};

// 确认
const onOk = () => {
  initData();
  Message.success(t('operations.success'));
};

// 初始化操作
const initData = async () => {
  loading.value = true;
  try {
    const { data } = await getAppConfig(body.value.name);
    formData.value = data;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    loading.value = false;
  }
};
initData();
</script>
<style scoped lang="less">
.input-width {
  width: 300px;
}
.input-large-width {
  width: 500px;
}
</style>